<script setup lang="ts">
import { getRoleListApi, assignRoleAuthApi } from '@/api/role'
import type { RoleListRes } from '@/types/role'
import { ref } from 'vue'
import { getAuthListApi } from '@/api/auth'
import type { AuthListRes } from '@/types/auth'
import { ElMessage } from 'element-plus'

const formData = ref({
  pagenum: 1,
  pagesize: 5,
  role_name: '',
})
const total = ref(0)

const roleList = ref([] as RoleListRes[])

// 获取列表数据
const getRoleList = async () => {
  const res = await getRoleListApi(formData.value)
  roleList.value = res.data.list as RoleListRes[]
  total.value = res.data.total as number
}
getRoleList()

// 分页
const handleSizeChange = (newSize: number) => {
  formData.value.pagesize = newSize
  getRoleList()
}

const handleCurrentChange = (newPage: number) => {
  formData.value.pagenum = newPage
  getRoleList()
}

// 重置筛选数据
const resetRole = () => {
  formData.value = {
    pagenum: 1,
    pagesize: 5,
    role_name: '',
  }
  getRoleList()
}

// -----角色分配权限--------------------------
// 权限列表
const authList = ref([] as AuthListRes[])
const getAuthList = async () => {
  const res = await getAuthListApi()
  authList.value = res.data.data as AuthListRes[]
}

const editAuthVisible = ref(false)
const editAuthForm = ref({
  role_name: '',
  role_id: 0,
  auth_ids: '',
  auth_ids_son: '',
})
const editAuth = (row: RoleListRes) => {
  // 1.抽屉展示
  editAuthVisible.value = true

  // 2.得到该角色数据
  editAuthForm.value.role_name = row.role_name
  editAuthForm.value.role_id = row.role_id
  editAuthForm.value.auth_ids = row.auth_ids
  editAuthForm.value.auth_ids_son = row.auth_ids_son

  // 3.获取所有的权限列表
  getAuthList()
}

// 角色重新设置权限
const treeRef = ref()
const assignAuth = async () => {
  const res = treeRef.value!.getCheckedNodes(false, false)

  // 为 auth_ids和auth_ids_son设置数据
  const auth_ids_son = [] as number[]
  const auth_ids = [] as number[]
  res.forEach((item: AuthListRes) => {
    // 1.auth_ids_son
    if (item.auth_pid !== 0) auth_ids_son.push(item.auth_id)

    // 2.auth_ids
    if (item.auth_pid !== 0) {
      auth_ids.push(item.auth_id)
      auth_ids.push(item.auth_pid)
    }
  })

  editAuthForm.value.auth_ids_son = auth_ids_son.join()
  editAuthForm.value.auth_ids = [...new Set(auth_ids)].join()

  // console.log(editAuthForm.value)
  const authRes = await assignRoleAuthApi(editAuthForm.value)
  if (authRes.data.state !== 200) return ElMessage.error(authRes.data.msg)
  editAuthVisible.value = false
  ElMessage.success('分配权限成功')
  getRoleList()
}
</script>

<template>
  <!-- 筛选区 -->
  <el-card>
    <el-form :inline="true">
      <el-form-item label="角色名">
        <el-input placeholder="请输入角色名称" v-model="formData.role_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getRoleList">搜索</el-button>
        <el-button @click="resetRole">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 角色列表 -->
  <el-card style="margin-top: 15px">
    <template #header>
      <div class="card-header">
        <el-button type="danger">批量删除</el-button>
        <el-button type="primary">添加</el-button>
      </div>
    </template>

    <!-- table -->
    <el-table :data="roleList" border stripe>
      <el-table-column prop="role_id" label="角色编号" align="center"></el-table-column>
      <el-table-column prop="role_name" label="角色名称" align="center"></el-table-column>
      <el-table-column prop="role_desc" label="角色描述" align="center"></el-table-column>
      <el-table-column prop="created_at" label="创建于" align="center"></el-table-column>
      <el-table-column prop="updated_at" label="更新于" align="center"></el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template v-slot="{ row }">
          <el-button type="primary">更新</el-button>
          <el-button type="success" @click="editAuth(row)">分配权限</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 15px"
      v-model:current-page="formData.pagenum"
      v-model:page-size="formData.pagesize"
      :page-sizes="[2, 5, 10, 20]"
      size="large"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <!-- 分配权限抽屉弹出框 -->
  <el-drawer v-model="editAuthVisible" title="分配权限" direction="rtl" v-if="editAuthVisible">
    <el-form>
      <el-form-item label="角色名称">
        <el-input v-model="editAuthForm.role_name" disabled></el-input>
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          :data="authList"
          :props="{ label: 'auth_name', children: 'children' }"
          show-checkbox
          node-key="auth_id"
          :default-checked-keys="editAuthForm.auth_ids_son.split(',')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="assignAuth">立即分配</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped lang="scss"></style>
